import {
  View,
  TouchableOpacity,
  Text,
  StyleSheet,
  Modal,
  Platform,
  KeyboardAvoidingView
} from 'react-native';
import {useContext} from 'react';
import {ThemeContext} from './ThemeContextProvider';
export default function OutModal({
  show,
  setShow,
  title,
  children,
  width = 400,
  height = 'auto',
  maskColor = 'rgba(0,0,0,.1)',
}) {
  const {theme} = useContext(ThemeContext);
  const styles = StyleSheet.create({
    maskBox: {
      height: '100%',
      width: '100%',
      backgroundColor: maskColor,
      alignItems: 'center',
      justifyContent: 'center',
    },
    modal: {
      width: width,
      height: height,
      backgroundColor: theme.themeColor,
      padding: 20,
      borderRadius: 4
    },
    header: {
      justifyContent: 'space-between',
      flexDirection: 'row',
    },
    title: {
      fontSize: 18,
      color: theme.fontColor,
    },
    iconfont: {
      fontFamily: 'iconfont',
      fontSize: 20,
      color: theme.fontColor,
    },
    main: {
     
    },
  });
  return (
    <Modal
      visible={show}
      transparent={true}
      animationType="fade"
      onRequestClose={() => {
        setShow(false);
      }}>
      <View style={styles.maskBox}>
        <View style={styles.modal}>
          <View style={styles.header}>
            <Text style={styles.title}>{title}</Text>
            <TouchableOpacity
              activeOpacity={0.7}
              onPress={() => {
                setShow(false);
              }}>
              <Text style={styles.iconfont}>{'\ue629'}</Text>
            </TouchableOpacity>
          </View>
          <KeyboardAvoidingView
            style={{width: '100%', alignItems: 'center'}}
            behavior={Platform.OS == 'ios' ? 'padding' : 'height'}>
                <View style={styles.main}>{children}</View>
            </KeyboardAvoidingView>
        </View>
      </View>
    </Modal>
  );
}
